<template>
    <div class="box3">
        <div class="cb">
            <p class="cb-title">未来30天游客预测图</p>
            <p class="cb-bg"></p>
        </div>
        <div class="cb-charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
//引入echarts图表集成包
import * as echarts from 'echarts'
//引入水球图的包
import 'echarts-liquidfill'

//获取组件实例
let charts = ref()

onMounted(() => {
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
        //标题组件
        title: {
            text: '访问量',
            textStyle: {
                fonSize: 16,
                fontWeight: 1,
                color: '#29fcff'
            }
        },
        //x|y轴
        xAxis: {
            type: 'category',
            //两侧不留白
            boundaryGap: false,
            //分割线不要
            splitLine: {
                show: false,
            },
            data: ['7/28', '7/30', '8/1', '8/3', '8/5', '8/7', '8/9', '8/11', '8/13', '8/15', '8/17', '8/19', '8/21', '8/23', '8/25', '8/27'],
            //轴线的设置
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#29fcff'
                }
            },
            //刻度
            axisTick: {
                show: true,
            },
        },
        yAxis: {
            splitLine: {
                show: false,
            },
            //轴线的设置
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#29fcff'
                }
            },
            //刻度
            axisTick: {
                show: true,
            },
        },
        grid: {
            left: 50,
            top: 30,
            right: 20,
            bottom: 30,
        },
        //系列
        series: [
            {
                type: 'line',
                data: [1200, 1240, 660, 2299, 321, 890, 1930, 2300, 1240, 690, 1299, 1321, 390, 1400, 2000, 1877],
                //平滑曲线的设置
                smooth: true,
                //区域填充样式
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(133, 111, 64, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(133, 111, 64, 0.2)', // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            },
        ],
    })
})
</script>

<style scoped lang="scss">
.box3 {
    box-sizing: border-box;
    height: 100%;
    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: 100% auto;
    margin: 15px 20px 0 20px;

    .cb {
        height: 53px;

        .cb-title {
            color: white;
            font-size: 20px;
            margin-left: 20px;
        }

        .cb-bg {
            width: 68px;
            height: 7px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: cover;
            margin: 10px 0 0 20px;
        }
    }

    .cb-charts {
        height: 180px;
    }
}
</style>